<ion-view view-title="预约旅行" >
  <div class="bar bar-subheader bar-dark bar-half-transparent">
    <div class="button-bar">
      <button class="button button-clear highlight" 
      ng-repeat="(code,category) in productCategories" 
      ui-sref='app.productsCategory({category : code })'>{{category}}</button>
    </div>
  </div>  

  <ion-content>
    <div class="row" style="height: 28px;"> </div>
    <div class="card" ng-repeat="productSuite in productSuites">
        <div class="article-cover-image" 
        ui-sref='app.productsCategory({category : productSuite.category })'>
          <img class="full-image" 
          ng-src="{{rootUrl}}/{{productSuite.coverImageFileName}}">
          <div class="product-category-cover-image-title-wrapper">
            <h2 class="product-category-cover-image-main-title"> 
            {{productSuite.suiteName}} </h2>
          </div>
        </div>
        <div>
          <ion-scroll zooming="false" direction="x" 
          style="overflow: scroll;white-space: nowrap; height: 150px;">
            <span ng-repeat ="product in productSuite.products" 
            style="position: relative;">
              <div style="display: inline-block; height: 100px; width: 120px;">
                <img ng-src="{{rootUrl}}/{{product.coverImageFileName}}" 
                ui-sref="app.product({productId: product._id})"
                style="height: 80px; width: 120px;">
                <span style="position: absolute; bottom: -40px; left: 0px;  
                white-space: initial;">{{product.name}} - {{product.introduction}}</span>
                <span style="position: absolute; bottom: -60px; left: 0px; width: 100%;">
                  价格: <span class="main-thicker" style="position: absolute;right: 6px;">
                  ￥{{product.price|number}}</span>
                </span>
              </div>
            </span>
          </ion-scroll>
        </div>
    </div>
  </ion-content>
  <div class="floating-round-button">
    <a ui-sref='app.poList' ng-show="currentUser">
      <i class="icon ion-soup-can-outline highlight"></i>
    </a>
    <a ng-click="logon()" ng-hide="currentUser">
      <i class="icon ion-soup-can-outline highlight"></i>
    </a>
  </div>
</ion-view>
